
<template>
  <div class="total1">
    <p>更多新闻</p>  
    <div class="total">
        <div class="muen" >
                <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>新闻列表</el-breadcrumb-item>
             
                </el-breadcrumb>
        </div>
      
        <div>
        <el-table
            style="width:100% height:90px; "
            :data="newslist.slice((currentPage - 1) * pagesize,currentPage * pagesize)"
            >
            <el-table-column prop="time" width="100px"></el-table-column>
            <el-table-column prop="title" width="230px" ></el-table-column>
            <el-table-column prop="content"></el-table-column>
        </el-table>
    </div>  
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[3,4,6,8]"
            :page-size="pagesize"
            layout="total,sizes,prev,pager,next,jumper"
            :total="newslist.length">
        </el-pagination>
    </div>
  
  </div>
</template>

<script>
export default {

        data(){
            return{
                currentPage: 1,//初始页
                pagesize: 4,//每页的数据
                newslist:[]
            }
        },
        methods:{
            handleSizeChange(val) {
                this.pagesize=val
        console.log(`每页 ${val} 条`);
      },
        //初始页currentPage、初始每页数据数pagesize和数据
        datahandleSizeChange (size){
        console.log(size, 'size');
        this.pagesize = size;
        console.log(this.pagesize);//每页下拉显示数据
        },
        handleCurrentChange (currentPage){
        console.log(currentPage , ' currentPage ');
        this.currentPage = currentPage;
        console.log(this.currentPage);//点击第几页
        
        }
    },

    mounted(){
        this.$axios.get('http://127.0.0.1:8090/vue/listnews').then(
				res => { //eslint-disable-line nothis.list.name-unused-vars
					this.newslist = res.data
					console.log(this.newslist);
				});
  
}

}
</script>

<style scoped>
  .total1{
        width: 100%;
        height: 700px;
        background-color: rgb(234, 231, 231);;
      }
      .muen{
        background-color: white;
        padding-top: 10px;
        padding-left: 10px;
      }
.total{
    width: 80%;
    height: 500px;
    margin: auto;
  
}
.total1 p{
 font-size: 30px;
 text-align: center;
 height: 70px;
 background-color: aliceblue;
 margin-bottom: 0px;
 line-height: 70px;
}

.el-pagination{
text-align: center;
margin-top: 20px;
}
</style>